<template>
  <view class="wrap">
    <u-swiper
      :height="420"
      :list="imgList"
      :title="false"
      @click="imgListClick"
    ></u-swiper>
    <view v-for="item in menuLists" :key="item.id">
      <view class="workbench-title">{{ item.meta.title }}</view>
      <view class="toolbar">
        <u-grid class="grid" :col="4" :border="false">
          <u-grid-item
            v-for="(itemi, index) in item.children"
            :key="itemi.id"
            :index="index"
            @click="navTo(itemi.appUrl)"
          >
            <view class="menu-icon">
              <image
                v-if="itemi.appIcon"
                :src="vuex_config.baseUrl + itemi.appIcon"
                mode="widthFix"
              ></image>
              <image
                v-else
                src="@/static/aidex/images/menuIcon1.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="grid-text">{{ itemi.meta.title }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      menuLists: [],
      imgList: [
        {
          image: '/static/aidex/banner/banner01.jpg',
        },
        {
          image: '/static/aidex/banner/banner02.jpg',
        },
      ],
    }
  },
  onLoad() {
    this.$u.api.getMenus().then((res) => {
      if (res.code == '200') {
        this.menuLists = res.data
      }
    })
  },
  onShow() {
    this.$u.api.getHomeCount().then((res) => {
      if (res.code == '200') {
        let count = res.data > 0 ? (res.data > 99 ? '99+' : res.data + '') : 0
        uni.setTabBarBadge({
          index: 0,
          text: count,
        })
      }
    })
  },
  methods: {
    navTo(url) {
      // console.log(url, 'url')
      uni.navigateTo({
        url: url,
      })
    },
    imgListClick(index) {
      console.log(`点击了第${index + 1}页图片`)
    },
  },
}
</script>
<style lang="scss">
@import 'index.scss';

.banner-box {
  padding: 0 2%;
  width: 96%;
  height: 170rpx;
  margin: 30rpx 0 30rpx;
}

.u-swiper-wrap {
  padding: 0 10px;
}

.banner-pic {
  width: 47%;
  float: left;
  display: inline-block;
  margin: 0 1.5%;
}

.banner-pic image {
  width: 100%;
  height: 170rpx;
  border-radius: 12rpx;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.u-mode-light-info {
  background-color: #ffffff;
  color: #666666;
  border: 1px solid #e9ecf6;
  font-size: 12px;
  padding: 2px 8px;
  position: relative;
  top: -3px;
}

.workbench-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  padding: 15px 30rpx;
}

.home-icon i.icon-tongzhi {
  font-size: 22px;
}
</style>
